import 'package:flutter/material.dart';
import 'package:flutter/material.dart';
import 'package:xingsu/page/publisher/detail_info_tab.dart';
import 'package:get/get.dart';
import 'package:xingsu/page/publisher/viewModel/detail_viewmodel.dart';
import 'package:xingsu/page/user/login_page.dart';
import 'package:xingsu/util/use_preferences.dart';
import 'package:xingsu/widget/back_widget.dart';
import '../publish/publish_page.dart';
import 'detail_guide_page.dart';
import 'detail_info_header.dart';
import 'detail_task_info_page.dart';

class DetailPage extends StatefulWidget {
  final Map map;

  const DetailPage(this.map);

  @override
  State<DetailPage> createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage>
    with SingleTickerProviderStateMixin {
  late final TabController _tabController;

  late DetailViewModel _viewModel;

  @override
  void initState() {
    super.initState();
    _viewModel = Get.put(DetailViewModel(widget.map));

    _tabController = TabController(initialIndex: 0, length: 2, vsync: this)
      ..addListener(() {
        //点击tab回调一次，滑动切换tab不会回调
        if (_tabController.indexIsChanging) {
          return;
        }

        final index = _tabController.index;
        // widget.viewModel.switchPage(index);
      });
  }

  @override
  Widget build(BuildContext context) {
    Map map = widget.map;
    Map detail_info = map["detail_info"] ?? {};
    Map data = detail_info["data"] ?? {};
    Map taskInfo = data["task_info"];

    String backgroudColor = taskInfo["BackgroundColor"] ?? "#A66053";

    return Scaffold(
        backgroundColor: Get.theme.scaffoldBackgroundColor,
        body: Obx(() => _viewModel.map.isEmpty
            ? const SizedBox()
            : Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    width: Get.width,
                    color: const Color(0xFFA66053),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        SizedBox(
                          height: MediaQuery.of(context).padding.top,
                        ),
                        BackWidget(),
                        const SizedBox(
                          height: 5,
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    child: NestedScrollView(
                      headerSliverBuilder:
                          (BuildContext context, bool innerBoxIsScrolled) {
                        return <Widget>[
                          SliverPersistentHeader(
                            delegate: DetailInfoHeaderDelegate(widget.map),
                            floating: false,
                            pinned: false,
                          ),
                          SliverPersistentHeader(
                            delegate: DetailInfoTabDelegate(_tabController),
                            floating: true,
                            pinned: true,
                          ),
                        ];
                      },
                      body: TabBarView(controller: _tabController, children: [
                        DetailTaskInfoPage(widget.map),
                        const DetailGuidePage()
                      ]),
                    ),
                  ),
                  _btmWidget(),
                ],
              )));
  }

  Widget _btmWidget() {
    return Container(
      margin: EdgeInsets.fromLTRB(
          20, 10, 20, MediaQuery.of(context).padding.bottom + 10),
      child: Row(
        children: [
          // Column(
          //   children: const [
          //     Icon(
          //       Icons.share,
          //     ),
          //     SizedBox(
          //       height: 3,
          //     ),
          //     Text(
          //       "分享",
          //       style: TextStyle(fontSize: 12),
          //     )
          //   ],
          // ),
          // const SizedBox(
          //   width: 20,
          // ),
          Expanded(
              child: InkWell(
            onTap: () {
              if (UserPreferences.getIsLogin()) {
                Get.to(() => PublishPage());
              } else {
                Get.to(() => LoginPage());
              }
            },
            child: Container(
              alignment: Alignment.center,
              height: 45,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(5),
                  gradient: const LinearGradient(
                    colors: [Color(0xFF9E57F3), Color(0xFF7A52F7)],
                  )),
              child: const Text(
                "上传视频完成任务",
                style: TextStyle(color: Colors.white),
              ),
            ),
          ))
        ],
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }
}
